<template>
  <a-modal
    destroyOnClose
    :title="title"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @ok="handleOk"
    ok-text="下载"
    @cancel="handleCancel">
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" :rules="validatorRules">
          <a-form-model-item label="模板类型" prop="type">
            <a-select v-model="model.type" placeholder="请选择要下载的模板">
              <a-select-option v-for='(item,index) in proTypeData' :key='item.id' :value="item.tempUrl">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'TempleteDownload',
  components: {},
  props: ['type', 'url'],
  data() {
    return {
      title: '下载模板',
      visible: false,
      model: {
        type: ''
      },
      proTypeData: [],
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {
        type: [
          { required: true, message: '请选择要下载的模板', trigger: 'blur' }
        ]
      },
      isCheck: false
    }
  },
  methods: {
    init() {
      this.model = {}
      this.proTypeData = []
      getAction(this.url, { type: this.type }).then((res) => {
        if (res.success) {
          if (res.result && res.result.records.length > 0) {
            this.proTypeData = res.result.records
            this.visible = true
          } else {
            this.visible = false
            this.$message.warning('未找到该项目类别模板，请先上传模板')
          }
        } else {
          this.visible = false
          this.$message.warning('获取模板异常，请稍后再试或联系管理员！')
        }
      })
    },

    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.handleDownloadFile(this.model.type)
          this.visible = false
        }
      })
    },

    handleDownloadFile(fileUrl) {
      this.$message.success('正在下载，请稍等！')
      let url = `${window._CONFIG['domianURL']}/sys/common/download${fileUrl}`
      window.open(url, '_blank')
    },

    close() {
      this.$emit('ok')
      this.visible = false
    },

    handleCancel() {
      this.close()
    }
  }
}
</script>
<style lang="less" scoped>
@import '../css/checkForm.less';
</style>
<style scoped>
.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0;
}

/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0;
}
</style>
